@keyframes progress-bar-animation {
    from{
        background-position-x: 0%;
    }
    to{
        background-position-x: 400%;
    }
}

.progress-bar{
    position: relative;
    width: 100%;
    height: 2em;
    border-radius: 0.5em;

    box-shadow: 0 0.3em rgb(0, 0, 0);

    .foreground, .background{
        position: absolute;
        left: 0;
        height: 2em;
        border-radius: 0.5em;
    }

    .background{
        width: 100%;
        background-color: rgba(0, 0, 0, 0.6);
    }

    .foreground{
        background-image: url(../images/progressgreen.png);
        background-repeat: repeat-x;
        background-origin: content-box;
        background-size: auto 2em;
        background-position: center;
        animation: progress-bar-animation 20s infinite linear;
    }

    .content{
        font-size: 2em;
        font-weight: 900;
        .create-text-outlined(@font-family-header);
        white-space: nowrap;

        position: absolute;
        left: 50%;
        top: -0.4em;
        transform: translate(-50%);
    }
}

.progress-bar-l{
    .progress-bar();

    box-shadow: 0 0.45em rgb(0, 0, 0);

    &, .foreground, .background{
        height: 3em;
    }

    .foreground{
        background-size: auto 3em;
    }

    .content{
        font-size: 2.5em;
    }
}

.progress-bar-xl{
    .progress-bar();

    box-shadow: 0 0.6em rgb(0, 0, 0);

    &, .foreground, .background{
        height: 4em;
    }

    .foreground{
        background-size: auto 4em;
    }

    .content{
        font-size: 3em;
    }
}